import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { SearchBar, Grid, Tag,Tabs } from 'antd-mobile'
import './list.less'

import allbuy1 from '../../assets/img/allbuy1.png'
import allbuy2 from '../../assets/img/addbuy.png'
import swipers from '../../assets/img/swiper1.png'
export default class List extends Component {
  render() {
    return (
      <div>
        <Header title={'小U优选'} back></Header>
        <div className='search'>
          <SearchBar
            placeholder='请输入内容'
            style={{
              '--border-radius': '100px',
              '--background': '#ffffff',
              '--height': '32px',
              '--padding-left': '12px',
            }}
          />
        </div>
        <div className='nav'>
        <Tabs defaultActiveKey='1'>
          <Tabs.Tab title='综合推荐' key='1'>
           <div className='douleone'>筛选11.11大促商品</div>

           <div className='sTimeShop'>
              <img src={swipers} alt="" />
              <div className="detail">
                <h4> <Tag color='warning'>7.9折</Tag>溪牧原山茶花洁面乳精选太行山最优质……</h4>
                <div className='long'><img src={allbuy1} alt="" /><span>直降198元</span><b>限购一件</b></div>
                <span> 
                   <p>￥29.99 <i>￥69.9</i></p>
                   <img src={allbuy2} alt="" />

                </span>
              </div>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='销量' key='2'>
           
          </Tabs.Tab>
          <Tabs.Tab title='价格' key='3'>
           
          </Tabs.Tab>
          <Tabs.Tab title='好评度' key='4'>
         
          </Tabs.Tab>
          <Tabs.Tab title='店铺' key='5'>
           
          </Tabs.Tab>
          <Tabs.Tab title='筛选' key='6'>
            
          </Tabs.Tab>
        </Tabs>
        
        </div>
      </div>
    )
  }
}
